<template>
  <div v-for="article in articleDraftList" :key="article.id">
    <el-row class="article-item">
      <el-col :span="2" style="cursor: pointer"></el-col>
      <el-col :span="16" style="cursor: pointer">
        <div @click="goToArticlePage(article.id)" class="article-container"
             @mouseenter="hoveredArticle = article">
          <div class="article-content">
            <h2 class="article-title">{{ article.title }}
              <el-tag type="warning" style="margin-left: 10px">
                草稿
              </el-tag>
            </h2>
            <div class="article-content-truncated">
              {{ article.content.length > 50 ? article.content.substring(0, 50) + '...' : article.content }}
            </div>
            <div class="article-meta-container">
              <div>{{ article.updateTime.substring(0, 10) }} · 阅读量:{{ article.viewCount }} ·
                评论:{{ article.commentCount }} · 点赞数:{{ article.likeCount }}
              </div>
              <div class="editStyle" v-if="hoveredArticle === article">
                <!-- 编辑控件，例如按钮或输入框 -->
                <el-button @click.stop="goToUpdateArticlePage(article.id)">编辑</el-button>
              </div>
            </div>
            <el-divider/>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>

</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {ListArticleDraftByUserId} from "@/api/member/article.js";
import {useUserinfo} from "@/components/hooks/useUserinfo.js";
import {useRouter} from "vue-router";


const router = useRouter()
const {userinfo} = useUserinfo()
const {proxy: ctx} = getCurrentInstance() // 可以把ctx当成vue2中的this
const hoveredArticle = ref(null)


// 文章数据
const articleDraftList = ref([]);
const fetchArticleDraftByUserId = async () => {
  try {
    const {code, data, msg} = await ListArticleDraftByUserId(userinfo.value.id);
    if (code === 200) {
      articleDraftList.value = data;
    } else {
      ctx.$message.error(msg)
    }
  } catch (error) {
    ctx.$message.error(error)
  }
}


// 跳转文章详细页面
const goToArticlePage = (id) => {
  // router.push({name: 'ArticlePage', params: {id}})
  const resolved = router.resolve({
    name: 'ArticlePage',
    params: {id}
  });
  window.open(resolved.href, '_blank');
}


// 跳转更新文章页
const goToUpdateArticlePage = (id) => {
  const resolved = router.resolve({
    name: 'UpdateArticlePage',
    params: {id}
  });
  window.open(resolved.href, '_blank');
}


onMounted(() => {
  fetchArticleDraftByUserId()
})
</script>

<style scoped>
/* 文章内容展示 */
.article-container {
  display: flex;
  align-items: flex-start;
}

.editStyle {
  display: none; /* 默认隐藏编辑按钮 */
}

/* 当 article-container 被悬停时，显示其内部的 .editStyle */
.article-container:hover .editStyle {
  display: block; /* 显示编辑按钮 */
}

.article-meta-container {
  display: flex;
  justify-content: space-between; /* 水平方向上两端对齐 */
  align-items: center; /* 垂直方向上居中对齐（如果需要）*/
}

.article-item {
  margin-top: 20px;
  margin-bottom: 20px;
}

.article-content {
  flex-grow: 1; /* 文本内容占据剩余空间 */
}

.article-title {
  font-weight: bold; /* 字体加粗 */
  padding-top: 10px; /* 距离div的上端距离设置*/
}

.article-title:hover {
  color: lightskyblue;
}


.article-content-truncated {
  /* 确保文本溢出时显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 控制显示的行数，这里设置为1行 */
  -webkit-box-orient: vertical;
  color: black;
}

</style>